import { max, min } from 'lodash-es'

import type {
  ViewChartLineCreateOptionSeriesConfig,
  ViewChartLineProps,
} from './index.d'
import { CHART } from '@/constant'
// import { VChartViewChartLineProps } from '@/types';
export const DEFAULT_DATASET = {
  source: [
    ['product', '1', '2', '3', '4', '5', '6', '7'],
    ['煤', 10, 10, 30, 12, 15, 3, 7],
  ],
}
export const DEFAULT_OPTION = {
  backgroundColor: '',
  title: CHART.defaultTitle,
  legend: {
    icon: 'circle',
    top: '5%',
    right: '5%',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#556677',
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        show: false,
        // backgroundColor: 'rgba(0,0,0,0.1)',
        color: '#556677',
        borderColor: 'rgba(0,0,0,0)',
        shadowColor: 'rgba(0,0,0,0)',
        shadowOffsetY: 0,
      },
      lineStyle: {
        lineStyle: {
          color: '#ddd',
        },
      },
    },
    extraCssText:
      'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
    backgroundColor: '#fff',
    textStyle: {
      color: '#5c6c7c',
    },
    padding: [10, 10],
  },
  grid: CHART.defaultGrid,
  xAxis: [
    {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#DCE2E8',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // interval: 0,
        textStyle: {
          color: '#556677',
        },
        // 默认x轴字体大小
        fontSize: 12,
        // margin:文字到x轴的距离
        margin: 15,
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#DCE2E8',
        },
      },
      axisLabel: {
        textStyle: {
          color: '#556677',
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
}

export const DEFAULT_MARK_LINE = [
  {
    // 最大值和最小值
    data: [
      {
        yAxis: 10,
        label: {
          show: 'true',
          position: 'end',
          formatter: '增加量阈值54',
        },
        silent: true, // 图形是否不响应和触发鼠标事件
        lineStyle: {
          normal: {
            width: 2,
            color: 'red',
          },
        },
      },
    ],
  },
]

// const DEFAULT_SERIES = {
//   seriesLayoutBy: 'row',
//   type: 'line',
//   smooth: true,
//   symbolSize: 8,
//   // zlevel: 3,
//   // symbol: 'circle',
//   yAxisIndex: 0,
//   // showSymbol: false,
//   lineStyle: {
//     width: 5
//   }
// };

export function createOptionSeries(dataset: ViewChartLineProps['dataset'] = DEFAULT_DATASET, markLine: ViewChartLineProps['markLine'] = DEFAULT_MARK_LINE, option: any, config: ViewChartLineCreateOptionSeriesConfig = {
  isAreaShadow: false,
  isLineShadow: true,
  peak: false,
}) {
  const { isAreaShadow, isLineShadow, peak } = config
  const { source } = dataset
  const color = CHART.color
  const handlerData = [...source]
  const optionSeries = option?.series ? option.series : []
  handlerData.shift()
  const o = handlerData.map((_, i) => ({
    seriesLayoutBy: 'row',
    type: 'line',
    smooth: true,
    symbolSize: 8,
    // zlevel: 3,
    // symbol: 'circle',
    yAxisIndex: 0,
    // showSymbol: false,
    lineStyle: {
      width: 5,
      color: hex2Rgba(color[i] as string, 0.6),
      ...(() =>
        isLineShadow
          ? {
              shadowBlur: 3,
              shadowColor: hex2Rgba(
                color[i] as string,
                0.5,
              ),
              shadowOffsetY: 8,
            }
          : {})(),
    },
    // itemStyle: {
    //   normal: {
    //     color: color[i],
    //     // borderColor: hex2Rgba(color[i] as string, 0.2),
    //     borderColor: '#fff',
    //     borderWidth: 2
    //   }
    // },
    markLine: markLine[i] || {},
    ...(() =>
      isAreaShadow
        ? {
            areaStyle: CHART.createAreaStyle(
              color[i] as string,
            ),
          }
        : {})(),
    ...optionSeries[i],
  }))
  if (o.length === 1 && peak) {
    const d = [...handlerData[0]!]
    d.shift()
    const _max = max(d)
    const _min = min(d)
    const _middle = o[0]?.markLine?.data?.[0]?.yAxis
    o.push(o[0]!);
    (o[0] as any).areaStyle = {
      color: new CHART.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: hex2Rgba(CHART.color[3]!, 1),
          },
          {
            offset: Number(
              (
                (_max - _middle + _min)
                / (_max + _min)
              ).toFixed(2),
            ),
            color: hex2Rgba(CHART.color[3]!, 0),
          },
          {
            offset: 1,
            color: hex2Rgba(CHART.color[3]!, 0),
          },
        ],
        false,
      ),
      // shadowColor: hex2Rgba(color, 0.1),
      shadowBlur: 10,
    }
    o[1]! = {
      ...o[1]!,
      areaStyle: {
        origin: 'end',
        color: new CHART.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 1,
              color: hex2Rgba(CHART.color[1]!, 1),
            },
            {
              // offset: Number((_middle / (_max + _min)).toFixed(2)),
              offset: Number(
                (
                  (_max - _middle + _min)
                  / (_max + _min)
                ).toFixed(2),
              ),
              color: hex2Rgba(CHART.color[1]!, 0),
            },
            {
              offset: 0,
              color: hex2Rgba(CHART.color[1]!, 0),
            },
          ],
          false,
        ),
      },
      tooltip: {
        show: false,
      },
    } as any
  }
  // // 去除引用类型影响
  // !isAreaShadow && delete
  return o
}
